<template>
    <div class="app-role">
      <h3>库存日志</h3>
     <Query
       :items="queryColumns"
       :initial-params="queryParams"
       @query="handleQuery"
       labelWidth="100px"
     />
     <Table
       :table-columns="tableColumns"
       :table-loading="tableLoading"
       :table-data="tableData"
       :total="total"
       @pagination="handlePagination"
       :tree-props="{ children: 'children', hasChildren:'hasChildren',icon:'Plus' }"
     >
       <template #type="{row}">
          {{ row.type==1?'库存管理':'订单调整' }}
       </template>
     </Table>
    </div>
  </template>
  
  <script setup name="productTemeplate">
  import Table from "@/components/Table/index.vue";
  import Query from "@/components/Query/index.vue";
  import DialogForm from '@/components/FormDialog/index.vue'
  import { stockLogList, saveTemplate,saveClassify } from "@/api/goods";
  import { formatDate } from '@/utils'

  const { proxy } = getCurrentInstance()
  const tableData = ref([])
  const total = ref(0)
  const tableLoading = ref(true)
  const data = reactive({
   tableColumns: [
     { label: "操作人", prop: "createBy",width:140},
     { label: "类型", prop: "type",slot: 'type' },
     { label: "订单编号", prop: "orderNo" },
     { label: "SKU", prop: "wholeName" },
     { label: "变更前", prop: "oldNum" },
     { label: "变更后", prop: "newNum" },
     { label: "变更数", prop: "num" },
     { label: "变更时间", prop: "gmtModify" },
   ],
   queryColumns: [
    { label: "时间范围", prop: "overTime", type: 'datetime',attrs: { type: 'datetimerange',  endPlaceholder: '请选择', startPlaceholder: '请选择', valueFormat: 'YYYY-MM-DD HH:mm:ss', format: 'YYYY-MM-DD HH:mm:ss'},width:180},
    { label: "", prop: "search", type: 'input', attrs: {placeholder:'请输入商品名称/商品编号/订单编号'}},
   ],
   pageParams: {
    current: 1,
    size: 10
   },
   queryParams: {},
   formItems: [
  
   ]
  })
  
  const { tableColumns, queryColumns, pageParams, queryParams, formItems } = toRefs(data)
  /** 获取列表数据 */
  const getList = () => {
    tableLoading.value = true
    let overTime = queryParams.value.overTime || []
    const data  = {
      search:queryParams.value.search,
       ...pageParams.value,
       beginTime:overTime[0]&&formatDate(overTime[0]),
       endTime:overTime[1]&&formatDate(overTime[1]),
    }
    stockLogList(data)
    .then(res => {
      let list = res.data.records || []
      list.map(item=>{
        item.children = item.itemList || []
      })
      console.log(11,list)
       tableData.value = list
       total.value = res.data.total
    })
    .finally(() => {
       tableLoading.value = false
    })
  }
  
  getList()
  /** 搜索按钮操作 */
  const handleQuery = (val) => {
   queryParams.value = val
   getList()
  }
 
  /** 删除按钮操作 */
  function handleDelete(row) {
   proxy.$modal.confirm('是否确认删除此数据？').then(function() {
    saveTemplate({id: row.id, delFlag: -1}).then(() => {
       getList()
       proxy.$modal.msgSuccess("删除成功")
     })
   })
  }
  const handlePagination = (val) => {
   pageParams.value = val
   getList()
  }
  </script>
  
  <style lang="scss" scoped>
  .classifyName_box{
    display: flex;
    align-items: center;
    .classifyName_img{
      width: 60px;
      height: 60px;
      object-fit: cover;
      margin-left: 8px;
    }
    span{
  
    }
  }
  .app-role {
   padding: 8px
  }
  </style>